<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>待收款合同详情
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>后退
          </el-button>
        </div>
      </div>
    </div>
    <div class="contain">
      <div class="nav">详情信息</div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="合同信息" name="first">
          <div class="total">
            <div class="title">
              <div>单项合同信息</div>
              <div>
                <span @click="edit">编辑</span>
                <span @click="save">保存</span>
              </div>
            </div>
            <div class="tables">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <td>合同名称</td>
                  <td>
                    <el-input v-model="form.name" :disabled="flag"></el-input>
                  </td>
                  <td>内部合同编号</td>
                  <td>
                    <el-input v-model="form.num1" :disabled="flag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>所属框架合同编号</td>
                  <td>
                    <el-input v-model="form.num2" :disabled="flag"></el-input>
                  </td>
                  <td>所属框架合同</td>
                  <td>
                    <el-input v-model="form.fatherName" :disabled="flag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>单项合同号</td>
                  <td>
                    <el-input v-model="form.num3" :disabled="flag"></el-input>
                  </td>
                  <td>合同金额</td>
                  <td>
                    <el-input v-model="form.money" :disabled="flag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>项目部</td>
                  <td>
                    <el-input v-model="form.depar" :disabled="flag"></el-input>
                  </td>
                  <td>签订时间</td>
                  <td>
                    <el-input v-model="form.startTime" :disabled="flag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>完工时间</td>
                  <td>
                    <el-input v-model="form.endTime" :disabled="flag"></el-input>
                  </td>
                  <td>合同折扣价</td>
                  <td>
                    <el-input v-model="form.countPrice" :disabled="flag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>甲方</td>
                  <td>
                    <el-input v-model="form.buy" :disabled="flag"></el-input>
                  </td>
                  <td>降点数</td>
                  <td>
                    <el-input v-model="form.discount" :disabled="flag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>项目负责人</td>
                  <td>
                    <el-input v-model="form.charge" :disabled="flag"></el-input>
                  </td>
                  <td></td>
                  <td></td>
                </tr>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目清单" name="second">
          <div class="title">
            <div>项目信息</div>
            <div></div>
          </div>
          <div class="table">
            <el-table
              ref="multipleTable"
              :data="info"
              tooltip-effect="dark"
              style="width:100%"
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" align="center" width="55"></el-table-column>
              <el-table-column label="项目编号" align="center" width="150" prop="num"></el-table-column>
              <el-table-column label="项目名称" align="center" prop="name"></el-table-column>
              <el-table-column label="项目进度" align="center" width="150" prop="progress"></el-table-column>
              <el-table-column label="项目金额" align="center" width="150" prop="money"></el-table-column>
              <el-table-column label="操作信息" align="center" width="200">
                <template slot-scope="scope">
                  <a @click.prevent="detail(scope.row)" class="choose">查看详情</a>
                  <a @click.prevent="dialogVisible = true" class="choose">导出</a>
                  <a @click.prevent="please(scope.row.userId)" class="choose">请款</a>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="component-paging" v-if="info.length > 0">
            <div class="table-bottom">
              <div class="bottom-left" style="margin-left: 42px;">
                <button @click="handleDelete">删除</button>
              </div>
              <div class="paging">
                <div class="paging-left">
                  <p>
                    共
                    <span>{{total/pageSize}}</span> 页/
                    <span>{{total}}</span> 条数据
                  </p>
                </div>
                <el-pagination
                  background
                  @size-change="SizeChange"
                  @current-change="CurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30]"
                  :page-size="pageSize"
                  layout="sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="开票收款" name="third">
          <!--开票收款请款-->
          <div style="margin-bottom: 20px;">
            <ul class="pro_gourp">
              <li>
                <span style="width:110px">预付款进度：</span>
                <div :style="{left:aa*7.5+'px'}" class="tips">
                  <div class="tips_arrow"></div>
                  <div class="tips_text">2日</div>
                </div>
                <el-progress
                  style="width:750px;display:inline-block;line-height:2;"
                  :text-inside="true"
                  :stroke-width="16"
                  :percentage="aa"
                  color="#1abc9c"
                ></el-progress>
                <div class="totalPro">10日</div>
                <button style="width:98px" @click="ticket=true">开票请款</button>
              </li>
              <li>
                <span style="width:110px">进度款进度：</span>
                <div :style="{left:aa*7.5+'px'}" class="tips">
                  <div class="tips_arrow"></div>
                  <div class="tips_text">完工项目总额</div>
                </div>
                <el-progress
                  style="width:750px;display:inline-block;line-height:2;"
                  :text-inside="true"
                  :stroke-width="16"
                  :percentage="aa"
                  color="#1abc9c"
                ></el-progress>
                <div class="totalPro">100%</div>
                <button style="width:98px" @click="ticket=true">开票请款</button>
              </li>
              <li>
                <span style="width:110px">结算款进度：</span>
                <div :style="{left:aa*7.5+'px'}" class="tips">
                  <div class="tips_arrow"></div>
                  <div class="tips_text">竣工项目总额</div>
                </div>
                <el-progress
                  style="width:750px;display:inline-block;line-height:2;"
                  :text-inside="true"
                  :stroke-width="16"
                  :percentage="aa"
                  color="#1abc9c"
                ></el-progress>
                <div class="totalPro">100%</div>
                <button style="width:98px" @click="ticket=true">开票请款</button>
              </li>
              <li>
                <span style="width:110px">考核款进度：</span>
                <div :style="{left:aa*7.5+'px'}" class="tips">
                  <div class="tips_arrow"></div>
                  <div class="tips_text">竣工结算0年</div>
                </div>
                <el-progress
                  style="width:750px;display:inline-block;line-height:2;"
                  :text-inside="true"
                  :stroke-width="16"
                  :percentage="aa"
                  color="#1abc9c"
                ></el-progress>
                <div class="totalPro">2年</div>
                <button style="width:98px" @click="ticket=true">开票请款</button>
              </li>
            </ul>
          </div>
          <!--开票明细-->
          <div style="margin-bottom: 20px;">
            <div class="title">
              <div>到账汇总</div>
              <div>
                <span @click="edit">编辑</span>
                <span @click="save">保存</span>
              </div>
            </div>
            <div class="tables">
              <el-table :data="details" tooltip-effect="dark" style border>
                <el-table-column label="项目编号" align="center" width="210" prop="num"></el-table-column>
                <el-table-column label="合同名称" align="center" prop="name"></el-table-column>
                <el-table-column label="开票金额" align="center" width="210" prop="pay"></el-table-column>
                <el-table-column label="未到账金额" align="center" width="210" prop="money"></el-table-column>
              </el-table>
            </div>
          </div>
          <!--到账汇总-->
          <div>
            <div class="title">
              <div>开票明细</div>
              <div>
                <span @click="edit">编辑</span>
                <span @click="save">保存</span>
              </div>
            </div>
            <div class="tables">
              <el-table :data="arrive" tooltip-effect="dark" style border>
                <el-table-column label="批次" align="center" width="150" prop="num"></el-table-column>
                <el-table-column label="到账金额" align="center" width="150" prop="money"></el-table-column>
                <el-table-column label="到账日期" align="center" width="150" prop="date"></el-table-column>
                <el-table-column label="发票扫描件" align="center" prop="jian"></el-table-column>
                <el-table-column label="开票日期" align="center" width="150" prop="dates"></el-table-column>
                <el-table-column label="发票号" align="center" width="150" prop="nums"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!--导出弹框-->
      <div class="component-model">
        <el-dialog title="导出" :visible.sync="dialogVisible" width="600px">
          <div class="subFrame">
            <span>虚拟合同</span>
            <el-select v-model="value" placeholder="请选择分包合同">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button @click="dialogVisible = false;">确定</el-button>
          </span>
        </el-dialog>
      </div>

      <!--开票弹框-->
      <div class="component-model">
        <el-dialog title="开票请款" :visible.sync="ticket" width="950px">
          <div class="ticket_top">
            <div style="text-align:left;font-size:16px;">付款方信息：</div>
            <el-form
              :model="paySide"
              ref="ruleForm"
              label-width="350px"
              style="width:600px;margin:20px auto;"
            >
              <el-form-item label="认证单位名称（一般纳税人税务登记证上的名称）：" prop="name">
                <el-input v-model="paySide.name" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="国税一般纳税人识别号（新：统一社会信用代码）：" prop="code">
                <el-input v-model="paySide.code" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="地址：" prop="addr">
                <el-input v-model="paySide.addr" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="电话：" prop="tel">
                <el-input v-model="paySide.tel" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="开户行：" prop="open">
                <el-input v-model="paySide.open" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="账号：" prop="userName">
                <el-input v-model="paySide.userName" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="备注：" prop="remark">
                <el-input v-model="paySide.remark" style="width:240px;"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="ticket_bottom">
            <div class="component-listHeader">
              <div class="search-header">
                <div class="left-title">
                  <p class="left-text">
                    <span class="iconfont">&#xe61e;</span>
                    开票信息
                  </p>
                  <div class="right">
                    <button @click="ticketAdd=true">添加信息</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="table" style="width:900px;">
              <el-table ref="multipleTable" :data="ticketInfo" tooltip-effect="dark" style border>
                <el-table-column label="服务名称" align="center" width="120" prop="userName"></el-table-column>
                <el-table-column label="计量单位" align="center" width="120" prop="userTruename"></el-table-column>
                <el-table-column label="规格型号" align="center" width="120" prop="orgName"></el-table-column>
                <el-table-column label="数量" align="center" width="120" prop="roleNames"></el-table-column>
                <el-table-column label="单位" align="center" width="120" prop="orgName"></el-table-column>
                <el-table-column label="金额" align="center" width="120" prop="orgName"></el-table-column>
                <el-table-column label="税率" align="center" prop="orgName"></el-table-column>
              </el-table>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="ticket = false">取消</el-button>
            <el-button @click="ticket = false;">确定</el-button>
          </span>
        </el-dialog>
      </div>

      <!--添加信息弹框-->
      <div class="component-model">
        <el-dialog title="添加信息" :visible.sync="ticketAdd" width="500px">
          <div class="ticket_top">
            <el-form
              :model="ticketAddInfo"
              ref="ruleForm"
              label-width="100px"
              style="width:350px;margin:20px auto;"
            >
              <el-form-item label="服务名称：" prop="name">
                <el-input v-model="ticketAddInfo.name" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="计量单位：" prop="calc">
                <el-input v-model="ticketAddInfo.calc" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="数量：" prop="count">
                <el-input v-model="ticketAddInfo.count" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="金额：" prop="money">
                <el-input v-model="ticketAddInfo.money" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="规格型号：" prop="size">
                <el-input v-model="ticketAddInfo.size" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="单价：" prop="single">
                <el-input v-model="ticketAddInfo.single" style="width:240px;"></el-input>
              </el-form-item>
              <el-form-item label="税率：" prop="persent">
                <el-input v-model="ticketAddInfo.persent" style="width:240px;"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="ticketAdd = false">重置</el-button>
            <el-button @click="ticketAdd = false;">添加</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        //合同信息-单项合同信息
        name: "上海通信工程有限公司三标段（1期工程）",
        num1: "1001-1",
        num2: "245669",
        fatherName: "上海通信工程有限公司三标段",
        num3: "4566223",
        money: "￥45666",
        depar: "项目部",
        startTime: "2017-2-15",
        endTime: "2017-7-25",
        countPrice: "￥10002.2",
        buy: "中国移动",
        discount: "",
        charge: "王二"
      },
      flag: true, //是否可编辑
      activeName: "first",
      info: [
        {
          //项目信息
          num: "4526620",
          name: "上海通信工程",
          progress: "待完工",
          money: "566222"
        }
      ],
      multipleSelection: [], //全选
      total: 500,
      // 每页显示数据的条数
      pageSize: 10,
      // 当前显示的页面页码
      currentPage: 1,

      details: [
        {
          //开票明细
          num: "45662",
          name: "上海通信工程",
          pay: "456",
          money: "4566"
        }
      ],
      arrive: [
        {
          //到账汇总
          num: "111",
          money: "4566",
          date: "2017-5-20",
          jian: "456",
          dates: "2015-5-30",
          nums: "4562"
        }
      ],
      dialogVisible: false, //导出弹框是否显示
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      value: "", //导出
      aa: 75, //进度条百分比，后期根据后端数据在更改，现在展示用

      ticket: false, //开票请款弹框
      paySide: {
        name: "",
        code: "",
        addr: "",
        open: "",
        tel: "",
        remark: "",
        userName: ""
      }, //开票弹窗的表单 - 付款人信息
      ticketInfo: [], //开票弹窗的table
      ticketAdd: false, //添加弹窗的bool值
      ticketAddInfo: {
        name: "",
        calc: "",
        count: "",
        type: "",
        size: "",
        money: "",
        single: "",
        present: ""
      } //添加弹窗的表单
    };
  },
  created() {},
  mounted() {},
  methods: {
    //项目清单-详情
    detail() {
      this.$router.push({
        name: "detailpro",
        params: {}
      });
    },
    //编辑
    edit() {
      this.flag = false;
    },
    //保存
    save() {
      this.flag = true;
      console.log(this.form);
    },
    //tab切换
    handleClick(tab, event) {
      //            console.log(tab, event);
    },

    //项目清单全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //选中删除
    handleDelete() {
      if (
        this.multipleSelection != undefined &&
        this.multipleSelection.length >= 1
      ) {
      } else {
        this.$alert("请选择所要删除的内容", "提示", {
          confirmButtonText: "明白了"
        });
      }
    }
  },
  watch: {}
};
</script>
<style scoped>
a {
  cursor: pointer;
}
.contain {
  box-sizing: border-box;
  width: 1100px;
  border: 1px solid #e4e4e4;
  margin: 20px auto;
}
.tabs {
  width: 1060px;
  margin: 20px;
  box-sizing: border-box;
}
.nav {
  background: #f8f8f8;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
.title {
  background: #f8f8f8;
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
}
.title > div:first-of-type {
  float: left;
  color: #666;
  line-height: 50px;
}
.title > div:last-of-type {
  float: right;
}
.title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}
.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td:nth-of-type(2n) {
  text-align: left;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 160px;
  background: #f9fafc;
}
.choose {
  color: #1abc9c;
  padding: 0 5px;
}
.component-paging .table-bottom {
  width: 100%;
}
.subFrame {
  overflow: hidden;
}
.subFrame span {
  display: inline-block;
  width: 100px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border: 1px solid #e4e4e4;
  margin-right: 40px;
  border-radius: 4px;
}
.subFrame span:last-of-type {
  margin-right: 0;
}

.pro_gourp {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  flex-direction: column;
}
.pro_gourp li {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  line-height: 35px;
  height: 35px;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 20px;
}
.pro_gourp li .tips {
  position: absolute;
  top: 30px;
  left: 100px;
}

.pro_gourp li .tips .tips_arrow {
  width: 0;
  height: 0;
  border-width: 0 5px 7px;
  border-style: solid;
  border-color: transparent transparent #1abc9c;
  margin: 0 auto;
}

.pro_gourp li .tips .tips_text {
  font-size: 12px;
  color: #606266;
  line-height: 16px;
  width: 200px;
  text-align: center;
}

.pro_gourp li .totalPro {
  width: 50px;
  font-size: 14px;
  color: #606266;
  text-align: right;
}

.pro_gourp li button {
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 6.5px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 20px;
}

.pro_gourp li button:hover {
  background: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
}

.component-listHeader .search-header {
  width: 900px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 100px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.table {
  width: 100%;
  margin: 0 auto;
}
</style>







